/**
 * 测试文字显示位置
 */
import * as THREE from 'three';
import {OrbitControls} from '../../../node_modules/three/examples/jsm/controls/OrbitControls.js' 
import TWEEN from '../../../node_modules/three/examples/jsm/libs/tween.module.js';
import { FontLoader } from '../../../node_modules/three/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from '../../../node_modules/three/examples/jsm/geometries/TextGeometry.js';
import LineAnimate from './line_animate.js';
import showPoint from  './show_Points.js';
import showBox from './box_animate.js'
import showText from  './show_text.js'

const dpr = window.devicePixelRatio
const uiscene=new THREE.Scene();

const uiCamera = new THREE.OrthographicCamera(
    window.innerWidth / -2, 
    window.innerWidth / 2, 
    window.innerHeight / 2, 
    window.innerHeight / -2, 1, 1000)
uiCamera.position.z = 1000
uiscene.add(uiCamera);

//const renderer = new THREE.WebGLRenderer();
//const renderer = new THREE.WebGLRenderer({ antialias: true });
const renderer = new THREE.WebGLRenderer({
    antialias: true, // 必须开启抗锯齿
    powerPreference: "high-performance", // 强制使用高性能模式
    multisample: 8
});
// renderer.setSize(window.innerWidth * 2, window.innerHeight * 2);
// renderer.domElement.style.width = window.innerWidth + "px";
// renderer.domElement.style.height = window.innerHeight + "px";
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true
renderer.autoClear = false


let centerX=0;
let centerY=0;
let windowWidth=window.innerWidth/2;
let windowHeight=window.innerHeight / 2;

document.getElementById("threeConter").appendChild( renderer.domElement );

const controls = new OrbitControls(uiCamera, document.getElementById("threeConter"));
//controls.enableRotate=false; //使不旋转
//添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(300);
uiscene.add(axesHelper);

// const light = new THREE.DirectionalLight(0xffffff, 1);
// light.position.set(0, 0, 1);
// uiscene.add(light);

// // 添加环境光避免纯黑阴影
// uiscene.add(new THREE.AmbientLight(0x404040));
//uiscene.add(new THREE.AmbientLight(0x444444)); // 环境光
//uiscene.add(new THREE.DirectionalLight(0xffffff, 1)); // 方向光

// const fontLoader = new FontLoader();
// fontLoader.load('../../../node_modules/three/examples/fonts/FangSong_Regular_simplified.json', font => {
//     const textGeometry = new TextGeometry('高镁含锂卤水镁锂分离工艺', {
//         font: font,
//         size: 20,
//         height:0.1,
// 		depth: 1,
// 		curveSegments: 22,
// 		bevelEnabled: false
//     });
//     // 使用高光材质增强边缘对比度
//     //MeshPhongMaterial
//     //MeshStandardMaterial
//     const textMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
//     const textMesh = new THREE.Mesh(textGeometry, textMaterial);

//     textMesh.position.x=50;
//     textMesh.position.y=50;
//     uiscene.add(textMesh);
   
// });

//数轴上的点
/*创建点组*/
let positions1 = [];
let colors1 = [];
positions1.push( centerX, centerY, 0 );
positions1.push( 50, 50, 0 );
positions1.push( -1*windowWidth, windowHeight, 0 );
positions1.push( windowWidth, -1*windowHeight, 0 );
positions1.push( -1*windowWidth, -1*windowHeight, 0 );
colors1.push( 1, 1, 0 );
colors1.push( 1, 0, 0 );
colors1.push( 1, 1, 0 );
colors1.push( 1, 1, 0 );
colors1.push( 1, 1, 0 );
let points1=new showPoint(uiscene,positions1,colors1,30);
points1.fadeIn();


//Text test

let text=new showText("高镁含锂卤水镁锂分离工艺",50,50,new THREE.Color(1,1,0),20,uiscene);

//console.log('centerX, centerY,',centerX, centerY)
//let label1=new textLabel('高镁含锂卤水镁锂分离工艺',0,0 ,'#FF0000',10,false,false,uiCamera);
// let l=label1.width;
// label1.setPosition(windowWidth/2-l/2,0);
//console.log("label1.x,label1.y=",label1.x,label1.y)
//label1.fadeIn();

function render() {
    TWEEN.update();
    renderer.clear();
    renderer.render( uiscene, uiCamera );
    //渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render);
}
    
render();

